<!-- <template>
	<el-empty description="welcome"></el-empty>
</template>

<script>
	
</script>

<style>
</style> -->

<template>
	<el-card>
		<el-row  :gutter="25" justify="center">
			<el-col :span="3"></el-col>
			<el-col :span="5">
				<el-input v-model="SearchForm.classNo" placeholder="请输入搜索的班级号(如0822,0000)" prefix-icon="el-icon-monitor"></el-input>
			</el-col>
			<el-col :span="4" >
				<el-button type="primary" @click="search" prefix-icon="el-icon-search">搜索</el-button>
		</el-col>
		</el-row>
		<el-row :gutter="0" justify="center">
			<el-col :span="24">
				<div class="schart" id="myCharnt"></div>
			</el-col>
		</el-row>
	</el-card>
</template>

<script>
import echarts from "echarts";
import { ElMessage } from "element-plus";
export default {
	data() {
		return {
			chart: null,
			SearchForm:{
				classNo:"",
			},
			result:[],
			Form:{}
		};
	},
	mounted() {
		// this.chartSet();
		// this.setEcharts();
	},
	methods: {
		async search(){
			if(this.SearchForm.classNo.length != 4){
				ElMessage.error('输入的班级号不符合要求哦')
			}else{
				const { data: res } = await this.$http.post("api/searchbyclass", this.SearchForm)
				console.log(res)
				this.result = res.data.Result
				// console.log(this.result[0].MBTI)
				console.log(this.result.length)
				this.check();
				this.chartSet();
				this.setEcharts();
			}
		},
		check(){
			let form = {
				ISTJ:0,ISTP:0,ESTP:0,ESTJ:0,
				ISFJ:0,ISFP:0,ESFP:0,ESFJ:0,
				INFJ:0,INFP:0,ENFP:0,ENFJ:0,
				INTJ:0,INTP:0,ENTP:0,ENTJ:0,
			};
			for (let i = 0; i < this.result.length; i++) {
				form[this.result[i].MBTI]++
			}
			// console.log(form)
			this.Form = form
			// console.log(this.Form.ISFP)
		},
		chartSet() {
			let el = document.getElementById("myCharnt");
			this.chart = echarts.init(el);
		},
		setEcharts() {
			let option = {
				toolbox: {
					show: true,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: false },
						magicType: {
							show: true,
							type: ["funnel"],
						},
						restore: { show: true },
						saveAsImage: { show: true },
					},
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					top: "0%", //标签离上窗口距离
					left: "center",
				},
				series: [
					{
						name: "MBTI",
						type: "pie",
						radius: ["40%", "75%"], //内圈外圈
						avoidLabelOverlap: true,
						itemStyle: {
							borderRadius: 50, //瘪度
							borderColor: "#fff", //边缘颜色
							borderWidth: 3, //厚度
						},
						label: {
							show: false,
							position: "center",
						},
						emphasis: {
							label: {
								show: true,
								fontSize: "30",
								fontWeight: "bold",
							},
						},
						labelLine: {
							show: true,
						},
						data: [
							{ value: this.Form.ISTJ, name: "ISTJ" },
							{ value: this.Form.ISTP, name: "ISTP" },
							{ value: this.Form.ESTP, name: "ESTP" },
							{ value: this.Form.ESTJ, name: "ESTJ" },
							{ value: this.Form.ISFJ, name: "ISFJ" },
							{ value: this.Form.ISFP, name: "ISFP" },
							{ value: this.Form.ESFP, name: "ESFP" },
							{ value: this.Form.ESFJ, name: "ESFJ" },
							{ value: this.Form.INFJ, name: "INFJ" },
							{ value: this.Form.INFP, name: "INFP" },
							{ value: this.Form.ENFP, name: "ENFP" },
							{ value: this.Form.ENFJ, name: "ENFJ" },
							{ value: this.Form.INTJ, name: "INTJ" },
							{ value: this.Form.INTP, name: "INTP" },
							{ value: this.Form.ENTP, name: "ENTP" },
							{ value: this.Form.ENTJ, name: "ENTJ" },

						],
					},
				],
			};

			this.chart.setOption(option, true);
		},
	},
};
</script>

<style scoped>
.schart {
	width: 100%;
	height: 506px;
}
</style>